<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="姓名" prop="expertName">
            <Input
              type="text"
              v-model="searchForm.expertName"
              placeholder="请输入姓名"
              :maxlength="10"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <!-- <Form-item label="手机号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入手机号"
              :maxlength="11"
              clearable
              style="width: 200px"
            />
          </Form-item> -->
          <Form-item label="提现方式" prop="withdrawMethod">
            <Select
              v-model="searchForm.withdrawMethod"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in withdrawList" :key="k" :value="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
          <Form-item label="审核状态" prop="applyStatus">
            <Select
              v-model="searchForm.applyStatus"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option v-for="(item, k) in statusList" :key="k" :value="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
          <Form-item label="申请时间" prop="dateRange">
            <DatePicker
              type="daterange"
              v-model="searchForm.dateRange"
              placeholder="选择咨询时间"
              style="width: 200px"
            />
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      >
        <template slot-scope="{ row }" slot="status">
          <span v-if="row.applyStatus == 'APPLY'" style="color: #ff3c2a">申请中</span>
          <span v-if="row.applyStatus == 'VIA_AUDITING'" style="color: #68cabe"
            >审核通过</span
          >
          <span v-if="row.applyStatus == 'FAIL_AUDITING'" style="color: #b6b6b6"
            >审核未通过</span
          >
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button type="success" :disabled="row.applyStatus != 'APPLY'" style="margin-right: 5px" @click="submitForm(row, true)"
            >通过</Button
          >
          <Button type="error" :disabled="row.applyStatus != 'APPLY'" @click="submitForm(row, false)">拒绝</Button>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changerows"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        />
      </Row>
    </Card>

    <!-- 审核模态框 -->
    <Modal v-model="viewFlag" title="审核拒绝">
      <div class="modal-info">
        <Input
          v-model="remark"
          type="textarea"
          :maxlength="100"
          :autosize="{ minRows: 4, maxRows: 4 }"
          show-word-limit
          placeholder="请填写拒绝理由"
        />
      </div>
      <div slot="footer">
        <Button @click="viewFlag = false">取消</Button>
        <Button type="error" :loading="isClick" @click="approved(false)">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_withdrawal from "@/api/withdrawal.js";

export default {
  name: "withdrawal",
  data() {
    return {
      loading: false, // 加载状态
      viewFlag: false, // modal显隐控制
      searchForm: {
        // 请求参数
        pageNumber: 1, // 页数
        pageSize: 10, // 条数
        expertName: "", // 专家名称
        mobile: "", // 手机号
        withdrawMethod: "", // 提现方式
        applyStatus: "", // 审核状态
        dateRange: [], // 提现申请时间范围
        startDate: "", // 提现申请开始时间
        endDate: "", // 提现申请结束时间
      },
      withdrawList: [
        // 提现方式
        { label: "微信", value: "WECHAT" },
        { label: "支付宝", value: "ALIPAY" },
      ],
      statusList: [
        // 审核状态
        { label: "申请中", value: "APPLY" },
        { label: "通过", value: "VIA_AUDITING" },
        { label: "未通过", value: "FAIL_AUDITING" },
      ],
      columns: [
        { title: "姓名", key: "expertName", minWidth: 120, tooltip: true },
        { title: "身份证号", key: "idCard", minWidth: 300, tooltip: true },
        { title: "手机号", key: "mobile", minWidth: 150, tooltip: true },
        {
          title: "提现方式",
          minWidth: 100,
          render: (h, params) => {
            const isWeChat = params.row.withdrawMethod == "WECHAT";
            return h("span", isWeChat ? "微信" : "支付宝");
          },
        },
        { title: "申请提现金额（元）", key: "applyMoney", minWidth: 300, tooltip: true },
        { title: "申请时间", minWidth: 180, key: "createTime", tooltip: true },
        { title: "审核状态", minWidth: 130, slot: "status" },
        { title: "操作", align: "center", width: 200, slot: "action", fixed: "right" },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      editRow: {}, // 操作内容
      remark: "", //拒绝理由
      isClick: false, // 提交中
    };
  },
  methods: {
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changerows(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    // 审核
    submitForm(v, status) {
      if (v.applyStatus != 'APPLY') return;
      this.editRow = v;
      this.remark = "";
      if (status) {
        // 通过
        this.approved(true);
      } else {
        // 拒绝
        this.viewFlag = true;
      }
    },
    // 审核
    approved(status) {
      if (this.isClick) return;
      this.$Modal.confirm({
        title: `确认${status ? '通过' : '拒绝'}`,
        content: `<p>您确认要审核${status ? '通过' : '拒绝'}？</p>`,
        loading: true,
        onOk: () => {
          let params = {
            applyId: this.editRow.id,
            result: status,
            remark: this.remark,
          };
          this.isClick = true;
          API_withdrawal.postWithdrawApply(params)
            .then((res) => {
              if (res.success) {
                this.$Message.success(`已${status ? '通过' : '拒绝'}`);
                this.viewFlag = false;
                this.getData();
              }
            })
            .finally(() => {
              this.isClick = false;
              this.$Modal.remove()
            });
        },
      });
    },
    //查询提现列表
    getData() {
      let params = Object.assign({}, this.searchForm);
      let range = params.dateRange;
      if (range && range.length && range[0]) {
        params.startDate = new Date(range[0]).Format("yyyy-MM-dd") + " 00:00:00";
        params.endDate = new Date(range[1]).Format("yyyy-MM-dd") + " 23:59:59";
      }
      delete params.dateRange;
      this.loading = true;
      API_withdrawal.getWithdrawApplyPage(params)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.modal-info {
  overflow-y: auto;
}
</style>
